// import {PlCarousel, PlCarouselItem} from "plain-design";
import {notNullValue} from "../../packages/utils/notNullValue";
import './predefinedComponents.scss'
import {createCmsButton} from "../../components/CmsButton";
import {iReactivityApi, iVisualComponentRender} from "../../packages/utils/types.base";
import {tComponentRender} from "../../packages/createVisualEditorUser/createVisualEditorComponent/createVisualEditorComponentRender";
import {createClasses} from "../../packages/utils/createClass";
import {createCmsCarousel} from "../../components/CmsCarousel";

export function predefineComponentRender({registryComponentRender}: tComponentRender, reactivityApi: iReactivityApi) {

    const classes = createClasses(reactivityApi.type)

    /*---------------------------------------可用组件-------------------------------------------*/
    registryComponentRender('image', renderImage)

    const CmsButton = createCmsButton(reactivityApi)
    registryComponentRender('button', ({data: {data}}) => (
        <CmsButton mode={data.mode} size={data.size} width={data.width} arrow={data.arrow}>
            {data.text}
        </CmsButton>
    ))

    registryComponentRender('column-container', ({data, renderList}) => (
        renderList({
            scope: data,
            childrenLength: data.data.columnNum,
            getChildrenStyles: ({index, page}) => data.childrenData && index !== data.childrenData.length - 1 ? {marginRight: `${notNullValue(data.data.gutter, page.gutter)}px`} : undefined
        })
    ))

    registryComponentRender('rows-container', ({data, renderList}) => (
        renderList({
            scope: data,
            childrenLength: data.data.rowsNum,
            getChildrenStyles: ({index, page}) => data.childrenData && index !== data.childrenData.length - 1 ? {marginBottom: `${notNullValue(data.data.gutter, page.gutter)}px`} : undefined,
        })
    ))

    const {Carousel, CarouselItem} = createCmsCarousel(reactivityApi)
    registryComponentRender('carousel-container', ({data, renderItem, isPreview}) => {
        return (
            <Carousel autoplay={isPreview ? data.data.autoplay : false}
                      loop={isPreview ? data.data.loop : false}
                      childNum={data.data.carouselNum}
                      hideButton={data.data.hideButton}
                      {...classes('visual-editor-carousel-container')}
                      style={{overflow: 'hidden'}}>
                {new Array(data.data.carouselNum).fill(null).map((_, index) => (
                    <CarouselItem key={index}>
                        {renderItem({
                            bindIndex: index,
                            bindList: data.childrenData,
                            onChange: () => {data.childrenData = [...data.childrenData || []]},
                        })}
                    </CarouselItem>
                ))}
            </Carousel>
        )
    })
    registryComponentRender('fixed-size-container', ({data, renderList}) => {
        return (
            <div {...classes('cms-visual-editor-fixed-size-container')}>
                {renderList({scope: data, childrenLength: 1})}
            </div>
        )
    })
    registryComponentRender('square-container', ({data, renderList}) => {
        return (
            <div {...classes('cms-visual-editor-square-container-wrapper')}>
                <div {...classes('cms-visual-editor-square-container')}>
                    {renderList({scope: data, childrenLength: 1})}
                </div>
            </div>
        )
    })
    registryComponentRender('text', ({data}) => {
        return (data.data.text)
    })
    registryComponentRender('video', ({data}) => {
        return (
            <video src={data.data.url} controls autoPlay={data.data.autoplay} muted={data.data.autoplay} controlsList="nodownload,nofullscreen" style={{display: 'block', width: data.data.width, height: data.data.height}}/>
        )
    })

    /*---------------------------------------容器组件-------------------------------------------*/
    registryComponentRender('普通容器', undefined)
    registryComponentRender('宫格容器', undefined)
    registryComponentRender('正方形容器', undefined)
    registryComponentRender('多列容器', undefined)
    registryComponentRender('卡片容器', undefined)
    registryComponentRender('选项卡容器', undefined)
    registryComponentRender('折叠容器', undefined)

    /*---------------------------------------媒体组件-------------------------------------------*/
    registryComponentRender('音频', undefined)
    registryComponentRender('视频', undefined)
    registryComponentRender('地图', undefined)
    registryComponentRender('图片', undefined)
    registryComponentRender('文件', undefined)
    /*---------------------------------------图表组件-------------------------------------------*/
    registryComponentRender('面积图', undefined)
    registryComponentRender('柱状图', undefined)
    registryComponentRender('漏斗图', undefined)
    registryComponentRender('折线图', undefined)
    registryComponentRender('饼图', undefined)
    /*---------------------------------------组合组件-------------------------------------------*/
    registryComponentRender('商品卡片', undefined)
    registryComponentRender('横幅', undefined)
    registryComponentRender('推荐列表', undefined)
    registryComponentRender('活动', undefined)
    registryComponentRender('商品大类', undefined)
    /*---------------------------------------其他组件-------------------------------------------*/
    registryComponentRender('登陆表单', undefined)
    registryComponentRender('注册表单', undefined)
    registryComponentRender('商城模板', undefined)
    registryComponentRender('未命名_1', undefined)
    registryComponentRender('未命名_2', undefined)
    /*---------------------------------------基础组件-------------------------------------------*/
    registryComponentRender('输入框', undefined)
    registryComponentRender('多行输入', undefined)
    registryComponentRender('密码输入', undefined)
    registryComponentRender('数字输入', undefined)
    registryComponentRender('评分输入', undefined)
    registryComponentRender('滑动条', undefined)
    registryComponentRender('选择框', undefined)
    registryComponentRender('树形选择', undefined)
    registryComponentRender('级联选择', undefined)
    registryComponentRender('穿梭框', undefined)
    registryComponentRender('复选框组', undefined)
    registryComponentRender('单选框组', undefined)
    registryComponentRender('日期选择', undefined)
    registryComponentRender('日期范围', undefined)
    registryComponentRender('时间选择', undefined)
    registryComponentRender('时间范围', undefined)
    registryComponentRender('上传', undefined)
    registryComponentRender('拖拽上传', undefined)
    registryComponentRender('开关', undefined)
}

const renderImage: iVisualComponentRender = ({data, renderList}) => {
    return (
        <>
            <img src={data.data.url} style={{width: data.data.width, height: data.data.height, display: 'block', objectFit: data.data.objectFit, objectPosition: data.data.objectPosition}}/>
            {data.data.hasCover && renderList({scope: data, childrenLength: 1,})}
        </>
    )
}
